import { Row, Col, Button, Icon, InputNumber, Form, Tooltip } from 'antd';
import React, { useMemo, useState, useEffect } from 'react';
import { SelectableTable, NumberView } from '@/components/BaseTable';
import { showConfirm } from '@/utils/utils';
import { connect } from 'dva';
import styles from './index.less';

class CellEditRange extends React.PureComponent {
  render() {
    const { cellData, onChange, rowData } = this.props;
    return (
      <Form.Item
        hasFeedback
        validateStatus={Math.abs(cellData) > 20 ? 'error' : 'success'}
        style={{ width: '100%', padding: 0, margin: 0 }}
      >
        <InputNumber
          precision={2}
          value={cellData}
          formatter={value => `${value}%`}
          parser={value => value.replace('%', '')}
          onChange={value => onChange(value, rowData.id)}
        />
      </Form.Item>
    );
  }
}

export default connect()(props => {
  const [checkeds, setCheckeds] = useState([]);
  const [valueAll, setValueAll] = useState(0);
  const onChangeRangeVal = (val, ids) => {
    props.dispatch({
      type: 'PriceManageItems/changeBatchModifyPt',
      payload: { val, ids },
    });
  };

  const fixedColumns = useMemo(
    () => [
      {
        key: 'name',
        dataKey: 'name',
        title: '组团/产品构成/楼栋',
        width: 300,
        align: 'left',
        frozen: 'left',
        cellRenderer: ({ cellData }) => (
          <Tooltip placement="topLeft" title={cellData}>
            <div className="ellipsis">{cellData}</div>
          </Tooltip>
        ),
      },
      {
        key: 'orgPackage',
        dataKey: 'orgPackage',
        title: '面积段',
        width: 120,
        align: 'center',
      },
      {
        key: 'beforePrice',
        dataKey: 'beforePrice',
        title: '调整前均价',
        width: 120,
        align: 'right',
        dataGetter: ({ rowData }) => [rowData.beforePrice],
        cellRenderer: <NumberView precision={0} />,
      },
      {
        key: 'afterPrice',
        dataKey: 'afterPrice',
        title: '调整后均价',
        width: 120,
        align: 'right',
        dataGetter: ({ rowData }) => [rowData.afterPrice],
        cellRenderer: <NumberView precision={0} />,
      },
      {
        key: 'range',
        dataKey: 'range',
        title: (
          <Row type="flex" align="middle" justify="space-between" style={{ width: 169 }}>
            <Col>均价幅度</Col>
            <Col>
              <InputNumber
                precision={2}
                value={valueAll}
                disabled={!checkeds.length}
                formatter={value => `${value}%`}
                parser={value => value.replace('%', '')}
                onChange={val => {
                  setValueAll(val);
                  onChangeRangeVal(val, checkeds);
                }}
              />
            </Col>
          </Row>
        ),
        width: props.width - 70 - 512,
        align: 'right',
        cellRenderer: <CellEditRange onChange={(val, id) => onChangeRangeVal(val, [id])} />,
      },
    ],
    [checkeds, valueAll],
  );

  const onClickSave = () => {
    showConfirm(
      () => {
        props.dispatch({ type: 'PriceManageItems/saveBatchModifyPt' });
        props.onClose();
      },
      '批量调整均价',
      '确认调整后，将完全覆盖已选产品楼栋/面积段的均价信息！',
    );
  };

  useEffect(() => {
    if (checkeds.length > 0) {
      onChangeRangeVal(valueAll, checkeds);
    } else {
      setValueAll(0);
    }
  }, [checkeds]);

  return (
    <div style={{ paddingBottom: '70px', position: 'relative' }}>
      <div className={styles.copyPriceCard}>
        <Row
          className={styles.copyPriceCardTitle}
          type="flex"
          align="middle"
          justify="space-between"
        >
          <Col>请选择调整的楼栋/面积段</Col>
          <Col style={{ color: 'red' }}>
            <Icon type="info-circle" style={{ color: 'red' }} theme="filled" />
            &nbsp; 确认调整后，将完全覆盖已选产品楼栋/面积段的均价信息！
          </Col>
        </Row>
        {props.items.ptBatchData.length > 0 && (
          <SelectableTable
            width={props.width - 70}
            height={document.body.clientHeight - 290}
            selectable
            columns={fixedColumns}
            data={props.items.ptBatchData}
            rowHeight={36}
            headerHeight={35}
            onSelectedRowsChange={keys => setCheckeds(keys)}
          />
        )}
      </div>
      <div className={styles.copyPriceFooter} style={{ width: `${props.width}px` }}>
        <Button onClick={onClickSave} type="primary" style={{ marginRight: 8 }}>
          保存
        </Button>
        <Button onClick={props.onClose}>取消</Button>
      </div>
    </div>
  );
});
